<template>
    <!-- collapse-transition设为false,使用transition,解决动画卡顿问题-->
    <el-menu :collapse="collapse" :default-active="menuInfo().name" :collapse-transition="false"
        :mode="pageSet().layoutComponent.menuMode" @select="select">
        <!-- 直接嵌套组件,菜单不能显示省略号 -->
        <template v-for="item in menuList.arr" :key="item.index">
            <el-sub-menu v-if="item.children?.length" :index="item.index" :key="item.path"
                popper-class="popperSubmenu">
                <template #title>
                    <el-icon>
                        <component :is="item.icon || 'Menu'"></component>
                    </el-icon>
                    <span>{{ item.title }}</span>
                </template>
                <MenuChild :menuData="item.children" />
            </el-sub-menu>
            <el-menu-item :index="item.index" :key='item.index' @click="menuClick(item)" v-else>
                <el-icon>
                    <component :is="item.icon || 'Menu'"></component>
                </el-icon>
                <template #title><span>{{ item.title }}</span></template>
            </el-menu-item>
        </template>
    </el-menu>
</template>
<script setup>
import request from "@/api/request";
import MenuChild from "./MenuChild.vue";
import { ref, reactive, onMounted, computed } from "vue";
import { isCollapse, menuInfo, breadcrumbList, pageSet } from "@/store/pinia";
import { getTreeData } from '@/hooks/menu/treeFindPath'
import { useRouter } from 'vue-router'
const router = useRouter()
const collapse = computed(() => isCollapse().isCollapse)
const menuList = reactive({ arr: [] });
onMounted(() => {
    menuData();
});
const menuData = () => {
    request.post("/menu").then((res) => {
        if (res.code !== 200) return;
        menuList.arr = res.data;
        menuInfo().updateList(res.data)
    });
};
const menuClick = (data) => {
    menuInfo().updatePath(data.path);
    router.push(data.path);
    menuInfo().updateMenuName(data.index);
    menuList.arr.forEach((item) => {
        if (item.index === data.index) {
            breadcrumbList().updateBreadcrumbList(
                { ...item, close: true },
                "add"
            );
        }
    });
};
const select = (index, indexPath, item, router) => {
    if (index === 'dashboard') {
        breadcrumbList().updateFilterData([])
        return
    }
    breadcrumbList().updateFilterData(getTreeData(menuList.arr, index))
}
</script>
<style lang="scss">
/* 纵向布局 */
.el-menu.el-menu--vertical {
    scrollbar-width: none;
    border-right: none !important;
    .el-menu,
    .el-sub-menu__title,
    .el-menu-item,
    .el-menu-item-group__title {
        background-color: var(--horizontal-header-bgcolor);
        color: var(--horizontal-menufont-color);
        font-size: 16px;
    }

    .e-menu-item-group__title {
        display: none;
    }

    .el-menu-item:hover,
    .el-sub-menu__title:hover {
        background-color: #060708;
    }

    .el-menu-item.is-active , .el-sub-menu.is-active:not(.is-opened)>.el-sub-menu__title {
        background-color: var(--isActive-color-03);
        color: var(--isActive-color);
        border-bottom: none;
    }
}
.el-popper .el-menu--vertical .el-menu{
    .el-sub-menu.is-active>.el-sub-menu__title {
        color: var(--isActive-color);
    }
}
/* 横向布局 */
.el-menu.el-menu--horizontal {
    scrollbar-width: none;
    border-right: none !important;

    .el-sub-menu__hide-arrow {
        width: 65px;
    }

    .el-menu,
    .el-sub-menu>.el-sub-menu__title,
    .el-menu-item,
    .el-menu-item-group__title {
        background-color: var(--horizontal-header-bgcolor);
        color: var(--horizontal-menufont-color);
        font-size: 16px;
        transition: none;
    }

    .e-menu-item-group__title {
        display: none;
    }

    .el-menu-item.is-active {
        background-color: var(--isActive-color-03) !important;
        color: var(--isActive-color) !important;
        border-bottom: none;
    }

    .el-menu-item:not(.is-disabled):hover,
    .el-sub-menu .el-sub-menu__title:hover,
    .el-menu-item:focus {
        background-color: var(--horizontal-menuhover-bgcolor);
        color: var(--horizontal-menufont-color);
    }

    .el-sub-menu.is-active .el-sub-menu__title {
        border-bottom: none;
        background-color: var(--isActive-color-03);
        color: var(--isActive-color);
    }
}

.popperSubmenu .el-menu,
.popperSubmenu .el-menu.el-menu--popup .el-sub-menu__title,
.popperSubmenu .el-menu.el-menu--popup .el-menu-item,
.popperSubmenu .el-menu.el-menu--popup .el-menu-item-group__title {
    background-color: var(--horizontal-header-bgcolor);
    color: #dadada;
}
.popperSubmenu .el-menu.el-menu--popup .el-menu-item.is-active{
background-color: var(--isActive-color-03) ;
        color: var(--isActive-color) ;
}
.popperSubmenu .el-menu.el-menu--popup .el-menu-item:not(.is-disabled):hover {
    background-color: var(--horizontal-menuhover-bgcolor);
    color: var(--horizontal-menufont-color);
}

.el-popper .el-menu--horizontal .el-menu{
    .el-sub-menu.is-active>.el-sub-menu__title {
        color: var(--isActive-color);
    }
}

.popperSubmenu.el-menu--horizontal {
    .el-menu .el-sub-menu.is-active>.el-sub-menu__title {
        color: var(--isActive-color);
    }

    .el-menu.el-menu--popup .el-menu-item.is-active {
        background-color: var(--isActive-color-03) !important;
        color: var(--isActive-color) !important;
    }

    .is-active::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 4px;
        content: "";
        background: var(--isActive-color);
    }

    .is-opened::before,
    .el-sub-menu::before {
        content: "";
        width: 0px;
    }
}</style>
  
